<template>
  <div>
    <!-- 搜索框 -->
     <!-- ref="refSearch" :a="currentPage" :b="pageSize"-->
    <search @sear="fn"></search>
    <!-- 内容标题 -->
    <div class="content-title">
          <p>数据明细</p>
          <el-button type="primary" @click="Export">导出</el-button>
    </div>
    <!-- 表格 -->
    <div class="tab-box">
      <el-table :data="OrderInformationData" style="width: 100%" :header-cell-style="{ background: '#F2F2F2' }">
        <el-table-column prop="orderNumber" label="订单编号"  width="180">
        </el-table-column>
        <el-table-column prop="orderType" label="订单类型" width="100">
        </el-table-column>
        <el-table-column prop="orderTime" label="下单时间" :formatter="dateFormat" ></el-table-column>
        <el-table-column prop="totalPrice" label="订单总价" width="100"> </el-table-column>
        <el-table-column prop="username" label="用户名" width="100"> </el-table-column>
        <el-table-column prop="payType" label="支付方式" width="180"> </el-table-column>
        <el-table-column prop="orderStatus" label="状态" width="100"> </el-table-column>
        <el-table-column label="操作" width="100">
            <template slot-scope="scope">
                <el-button type="text" size="small" @click="details(scope.row)">查看</el-button>
            </template>
        </el-table-column>
      </el-table>

      <pager :total="total" :pageSize="pageSize" :currentPage="currentPage"  @pageChange="pageChange"></pager>
      <!-- <div class="page-box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5,10,15,20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div> -->
    </div>
   
  </div>
</template>

<script>
import search from '../../components/order/InformationSearch.vue'
import pager from '../../components/common/pager.vue'
import exportExcel from '../../exportExcel.js'
export default {
  components:{search,pager},
  data(){
    return{
      total:0,//总页数
      pageSize:5,//每页条数
      currentPage:1,//当前页码
      OrderInformationData:[
        {
          orderNumber:'82383u98838',
          orderType:'炒菜',
          orderTime:'2020-01-02',
          totalPrice:'20000',
          username:'hero',
          payType:'微信小程序付款',
          orderStatus:'已支付'
        },
        {
          orderNumber:'82383u98838',
          orderType:'炒菜',
          orderTime:'2020-01-02',
          totalPrice:'20000',
          username:'hero',
          payType:'微信小程序付款',
          orderStatus:'已支付'
        },
        
      ],

      orderNumber:'',
      orderStatus:"",
      orderType:"",
      startTime:null,
      endTime:null,
      code:20000
    }
  },
  methods:{
        dateFormat(row, column, cellValue, index) {
            let date = new Date(parseInt(cellValue));
            let date1 = row[column.property];
            if(date1 == undefined || date1==null){
              return '';
            }
            let Y = date.getFullYear() + "-";
            let M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) + "-" : date.getMonth() + 1 + "-";
            let D =date.getDate() < 10 ? "0" + date.getDate() + " " : date.getDate() + " ";
            let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
            let m = date.getMinutes()  < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
            let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
            return Y + M + D == "NaN-NaN-NaN" ? "" : Y + M + D + " " + h + m + s;
        },
        //获取表格数据
        getData(page,pageSize,orderNumber,orderStatus,orderType,startTime,endTime){
          this.axios.post('/order/list',
          {
            page:page,
            pageSize:pageSize,
            orderNumber:orderNumber,
            orderStatus:orderStatus,
            orderType:orderType,
            startTime:startTime,
            endTime:endTime,
            },
          ).then((res)=>{
            console.log(res)
          let sta=res.data.data;
          for(let i in sta){
            if(sta[i].orderStatus==0){
              sta[i].orderStatus='未付款';
            }else if(sta[i].orderStatus==1){
              sta[i].orderStatus='已付款';
            }else if(sta[i].orderStatus==2){
              sta[i].orderStatus='已退款';
            }
          }
          this.total=res.data.count;//总条数
          this.OrderInformationData=sta;
          })
        },
        /* async getData1(page,pageSize){
          const {data:res}=await this.axios.post("/order/list",{
            page:page,
            pageSize:pageSize
          })
          console.log(res)
          
        }, */

        // handleSizeChange(size) {
        //     // console.log(`每页 ${val} 条`);
        //     this.pageSize=size;
        //     this.getData(this.currentPage,this.pageSize);
            
        // },
        // handleCurrentChange(currentPage) {
        //     // console.log(`当前页: ${val}`);
        //     this.currentPage=currentPage;
        //     this.getData(this.currentPage,this.pageSize);
        // },
        Export(){
          let json={
            method:'get',
            url:'/order/export',
            data:this.code,
            fileName:'订单信息'
          }
          exportExcel.exportMethod(json);
        },
        
        pageChange(v){
          this.pageSize=v.pageSize;
          this.currentPage=v.currentPage;
          this.getData(this.currentPage,this.pageSize,this.orderNumber,this.orderStatus,this.orderType,this.startTime,this.endTime)
        },
        fn(v){
          let sta=v.sta;
          for(let i in sta){
            if(sta[i].orderStatus==0){
              sta[i].orderStatus='未付款';
            }else if(sta[i].orderStatus==1){
              sta[i].orderStatus='已付款';
            }else if(sta[i].orderStatus==2){
              sta[i].orderStatus='已退款';
            }
          }
          this.OrderInformationData=sta;
          this.orderNumber=v.orderNumber;
          this.orderStatus=v.orderStatus;
          this.orderType=v.orderType;
          this.startTime=v.startTime;
          this.endTime=v.endTime;
          this.total=v.count;//查询后的总条数
        },
       
        //调整详情页面
        details(row){         
          // this.$router.push({path:'./orderDetails/id'})
          const id=row.id;
          this.$router.push({path:'./orderDetails',query:{id:id}});
    },
  },
  created(){
    this.getData(this.currentPage,this.pageSize,this.orderNumber,this.orderStatus,this.orderType,this.startTime,this.endTime);
  }
}
</script>

<style lang="less" scoped>
  *{
    font-family: "微软雅黑";
    font-weight: 400;
    color: '#333'
    }
    // 内容标题
  .content-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 0.1rem solid #dbe0e9;
    margin-top: 1rem;
    height: 4.5rem;
    background:#F2F2F2;
    padding:0 2rem;
    .el-button{
      height: 3.8rem;
      padding: 0 1.5rem;
    }
    p{
      font-size: 1.6rem;
    }
  }

  // 表格样式
  .tab-box{
    padding:  1.5rem;
    border: 0.1rem solid #dbe0e9;
    background: #fff;
    border-top:none;
    .el-table{
      border: 0.1rem solid #dbe0e9;
    }
    /deep/.el-table td, .el-table th{
      padding: 0.5rem 0;
      
    }
    // 表格数据居中
    /deep/.el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell{
      text-align: center;
    }
  }

  // /deep/.page{
  //   height: 3rem;
  //   padding:none;
  //   margin: none;
  // }
  
</style>